import { Outlet } from 'react-router-dom'
import { Layout } from '@/utils/antd-imports'
import ProtectedRoute from '../components/ProtectedRoute'
import WebSocketStatus from '../components/WebSocketStatus'
import './AuthLayout.css'

const { Content } = Layout

export default function AuthLayout() {
  return (
    <ProtectedRoute>
      <Layout className="auth-layout">
        <Content className="auth-content">
          <Outlet />
        </Content>
        {/* WebSocket状态指示器 */}
        <div style={{
          position: 'fixed',
          bottom: '20px',
          right: '20px',
          zIndex: 1000
        }}>
          <WebSocketStatus />
        </div>
      </Layout>
    </ProtectedRoute>
  )
}